<template>
  <div id="aCoursesList" class="bg-fa of">
    <section class="container">
      <client-only>
      <header class="comm-title">
        <h2 class="fl tac">
          <span class="c-333">正在直播</span>
        </h2>
        <el-button class="el-icon-video-camera" type="primary" round
                   style="float: right;display: inline;font-size: 1.6em"
                   @click="gotoLive"
        >
        </el-button>
      </header>
      <el-drawer
        title="进行直播相关设置"
        :visible.sync="drawer"
        direction="rtl"
        >
        <div class="demo-drawer__content">
          <el-form :model="live">
            <el-form-item label="操作提示：">
              本网站直播使用OBS工具进行直播，请下载<el-link type="primary" href="https://obsproject.com/" target="_blank">OBS</el-link>
            </el-form-item>
            <el-tooltip class="item" effect="dark" content="可数字和字母" placement="top-start">
            <el-form-item label="直播号码" label-width="80px">
              <el-input v-model="live.name" ></el-input>
            </el-form-item>
            </el-tooltip>
            <el-form-item label="直播标题" label-width="80px">
              <el-input v-model="live.title" ></el-input>
            </el-form-item>
            <el-form-item label="直播介绍" label-width="80px">
              <el-input v-model="live.introduce" ></el-input>
            </el-form-item>
          </el-form>
          <div class="demo-drawer__footer">
            <el-button @click="cancelForm">取 消</el-button>
            <el-button type="primary" @click="handle_Close" >确 定</el-button>
          </div>
        </div>
      </el-drawer>
      <section class="no-data-wrap" v-if="onlinelist.length==0">
        <em class="icon30 no-data-ico">&nbsp;</em>
        <span class="c-666 fsize14 ml10 vam">没有直播在进行，或许你可以直播看看</span>
      </section>
      <article v-if="onlinelist" class="i-teacher-list">
        <ul class="of">

          <li v-for="item in onlinelist" :key="item.id">
            <el-tooltip placement="top">
              <div slot="content" v-if="item.status==0">直播还在准备，请稍等,可进入看看直播是否开启</div>
              <div slot="content" v-else>直播已开始</div>
            <section class="i-teach-wrap">
              <div class="i-teach-pic">
                <a :href="'/online/'+item.id" :title="item.nickname" @click.stop.self="nohref">
                  <img :src="item.avatar" :alt="item.nickname" height="142" hright="142">
                </a>
              </div>
              <div class="mt10 hLh30 txtOf tac">
                <a :href="'/online/'+item.id" :title="item.nickname" class="fsize18 c-666">{{ item.nickname }}</a>
              </div>
              <div class="hLh30 txtOf tac">
                <span class="fsize14 c-999" >直播主题：{{ item.liveTitle }}</span>
              </div>
              <div class="mt15 i-q-txt">
                <p class="c-999 f-fA">介绍：{{ item.introduce }}</p>
              </div>
            </section>
            </el-tooltip>
          </li>
        </ul>
        <div class="clear"/>
      </article>
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
        >
          <div class="block">
            <span class="demonstration">默认</span>
            <el-image :src="src"></el-image>
          </div>
          <span>你的服务器地址为：rtmp://113285.livepush.myqcloud.com/live/</span><br>
          <span>你的密钥为你的直播号码：{{this.live.name}}</span><br>
          <span>注意：当你结束视频直播后，密钥就会失效和请不要告诉别人你的密钥</span>
          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>
      </client-only>
    </section>
  </div>
</template>

<script>
  import open_live from "@/api/open_live"
  import cookie from 'js-cookie'
  export default {

    data(){
      return{
        src: 'http://linjiahao.oss-cn-shenzhen.aliyuncs.com/1.PNG',
        dialogVisible: false,
        drawer: false,
        live:{
          title: '',
          name: '',
          introduce: ''
        },
        isopen: '已开播',
        close:'老师正在准备直播',
        onlinelist:{},
        timer1: '',
      }
    },
  created() {
    this.$nextTick(() => {
      this.getonline()
    });
  },
    mounted() {
      this.timer1 = setInterval(() => {
        open_live.getAll().then(response =>{
          this.onlinelist=response.data.data.online_all
        })
      }, 3000);
    },
    methods:{
      getonline(){
        open_live.getAll().then(response =>{
          this.onlinelist=response.data.data.online_all
        })
      },
      gotoLive(){
        var jsonStr = cookie.get("ljh_ucenter");
        if(jsonStr){
          this.drawer=true
        }else {
          this.$message({
            type:'error',
            message: '请先登陆'
          })
        }
      },
      handle_Close(done) {
        var jsonStr = cookie.get("ljh_ucenter");
        if(jsonStr){
          if (this.loading) {
            return;
          }
          this.$confirm('确定要进行直播吗？')
            .then(_ => {
              console.log(this.live)
              open_live.openLive(this.live).then(response =>{
                    if(response.data.code==20000){
                      this.dialogVisible=true
                      this.getonline()
                      this.drawer=false
                    }
              })
            })
            .catch(_ => {});
        }else {
          this.$message({
            type:'error',
            message: '请先登陆'
          })
        }
      },
      cancelForm() {
        this.loading = false;
        this.dialog = false;
        clearTimeout(this.timer);
      },
    }
  }
</script>
